<template>
  <div id="workbench" class="mt-5">
    <div class="card mb-0">
      <div class="card-header bg-info text-white">我的工作台</div>

      <template v-if="searchOption">
        <div class="card-body">
          <form>
            <div class="row mb-2">
              <input
                type="textfield"
                class="form-control"
                size="8"
                placeholder="乘客姓名"
                autocomplete="name"
                v-model="name"
              />
            </div>
            <div class="row mb-2">
              <input
                type="textfield"
                class="form-control"
                size="8"
                placeholder="乘客电话"
                autocomplete="tel"
                v-model="phone"
              />
            </div>
            <div class="row mb-2">
              <input
                type="textfield"
                class="form-control"
                size="10"
                placeholder="证件号"
                v-model="idno"
              />
            </div>
            <div class="row mb-2">
              <input
                type="textfield"
                class="form-control"
                size="10"
                placeholder="票号"
                v-model="ticketNo"
              />
            </div>
            <div class="row mb-2">
              <input
                type="textfield"
                class="form-control"
                size="6"
                placeholder="编码"
                v-model="pnrNo"
              />
            </div>
            <div class="row">
              <button
                type="button"
                class="btn btn-primary mb-2"
                @click.stop="search()"
              >
                确定
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                @click.stop="reset()"
              >
                重置
              </button>
            </div>
          </form>
        </div>
      </template>
      <template v-else>
        <div class="card-header">
          <button
            type="button"
            class="btn btn-primary float-end"
            @click.stop="showSearchOption()"
          >
            查找
          </button>
        </div>
        <div class="card-body px-0">
          <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
            <li class="nav-item">
              <a
                class="nav-link active"
                id="home-tab"
                data-bs-toggle="tab"
                href="#flightOrder"
                role="tab"
                aria-controls="home"
                aria-selected="true"
                >机票订单({{ dataList.length }})</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="profile-tab"
                data-bs-toggle="tab"
                href="#refundOrder"
                role="tab"
                aria-controls="profile"
                aria-selected="false"
                >退票单({{ refundOrders.length }})</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link"
                id="contact-tab"
                data-bs-toggle="tab"
                href="#changeOrder"
                role="tab"
                aria-controls="contact"
                aria-selected="false"
                >改签单({{ changeOrders.length }})</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link d-none"
                id="contact-tab"
                data-bs-toggle="tab"
                href="#passengers"
                role="tab"
                aria-controls="contact"
                aria-selected="false"
                >乘机人({{ passengerList.length }})</a
              >
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div
              class="tab-pane fade show active"
              id="flightOrder"
              role="tabpanel"
              aria-labelledby="home-tab"
            >
              <flight-order-list :dataList="dataList"></flight-order-list>
            </div>
            <div
              class="tab-pane fade"
              id="refundOrder"
              role="tabpanel"
              aria-labelledby="profile-tab"
            >
              <flight-refund-list :dataList="refundOrders"></flight-refund-list>
            </div>
            <div
              class="tab-pane fade"
              id="changeOrder"
              role="tabpanel"
              aria-labelledby="contact-tab"
            >
              <flight-change-list :dataList="changeOrders"></flight-change-list>
            </div>
            <div
              class="tab-pane fade"
              id="passengers"
              role="tabpanel"
              aria-labelledby="contact-tab"
            >
              <passenger-list :dataList="passengerList"></passenger-list>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="accordion mt-5" id="accordionChangeLog">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingLog">
          <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapseLog"
            aria-expanded="false"
            aria-controls="collapseLog"
          >
            更新日志
          </button>
        </h2>
        <div
          id="collapseLog"
          class="accordion-collapse collapse"
          aria-labelledby="headingLog"
          data-bs-parent="#accordionChangeLog"
        >
          <div class="accordion-body">
            <p class="text-success">
              <strong>2021-02-24</strong>
            </p>
            <ul>
              <li>
                <h5>+ 增加三种结算单电子表格导出格式</h5>
                <h5>+ 乘机人和机票私有政策配对</h5>
                <h5>
                  + 账单页增加“客户名称”模糊搜索，机票账单支持“旅客姓名”模糊搜索
                </h5>
                <h5>
                  +
                  为客服分组的主管增加对账功能，可以查看相关客户的结算单和收款单
                </h5>
                <h5>+ 客服分组的主管可以查看相关客户的统计报表</h5>
              </li>
              <li>
                <h5>
                  * 供应商统计和支付方式统计支持按审核日期统计，显示分类统计结果
                </h5>
                <h5>* 机票私有政策区分是否需要白名单</h5>
                <h5>
                  * 销售角色+主管角色：是公司的销售主管；
                  客服角色+主管角色：是客户服务分组的主管；
                </h5>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingMore">
          <button
            class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#collapseMore"
            aria-expanded="false"
            aria-controls="collapseMore"
          >
            更多
          </button>
        </h2>
        <div
          id="collapseMore"
          class="accordion-collapse collapse"
          aria-labelledby="headingMore"
          data-bs-parent="#accordionChangeLog"
        >
          <div class="accordion-body">
            <p class="text-success">
              <strong>2020-12-21</strong>
            </p>
            <ul>
              <li>
                <h5>增加：订单支持上传附件</h5>
                <h5>增加：根据DETR结果显示机票订单的使用情况</h5>
                <h5>增加：航变信息通过企业微信通知相关人员</h5>
                <h5>增加：TPR数据导入后方便BSP开票情况的每日审核</h5>
                <h5>
                  增加：每日自动校验BSP的出票和退票，并将结果发送到企业微信
                </h5>
                <h5>增加：将每日报表自动生成并发送到财务部（企业微信）</h5>
              </li>
              <li>
                <h5>改进：账单导出（格式一）增加十位票号</h5>
                <h5>改进：机票自动出票供应商区分为BSP自动出票和GP出票</h5>
                <h5>改进：大客户政策开票年龄限制</h5>
                <h5>改进：模拟票号自动校验票号是否已使用</h5>
                <h5>改进：批量创建结算单时可以自定义结算单号前缀</h5>
              </li>
            </ul>
            <p class="text-success">
              <strong>2020-11-02</strong>
            </p>
            <ul>
              <li>
                <h5>+服务费模板: 新建、修改、查看及为客户设置适用模板</h5>
              </li>
            </ul>
            <p class="text-success">
              <strong>2020-08-30</strong>
            </p>
            <ul>
              <li>
                <h5>机票代理费分为: 航司代理费和自定代理费</h5>
              </li>
            </ul>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchFlightOrders } from "@/api/flight.js";
import { searchRefundOrders } from "@/api/flight-refund.js";
import { searchChangeOrders } from "@/api/flight-change.js";
import { searchPassengers } from "@/api/user.js";
import MyDatePicker from "@/components/my-datepicker.vue";
import FlightOrderList from "@/components/list/flight-order-list_h5.vue";
import FlightRefundList from "@/components/list/flight-order-refund-list_h5.vue";
import FlightChangeList from "@/components/list/flight-order-change-list_h5.vue";
import PassengerList from "@/components/list/passenger-list.vue";

export default {
  name: "MyWorkBench",
  components: {
    MyDatePicker,
    FlightOrderList,
    FlightRefundList,
    FlightChangeList,
    PassengerList,
  },
  data() {
    return {
      dataList: [],
      refundOrders: [],
      changeOrders: [],
      passengerList: [],

      searchOption: false,
      sc: {
        pageNo: 1,
        pageSize: 5,
      },

      beginDate: "",
      endDate: "",
      name: "",
      phone: "",
      idno: "",
      ticketNo: "",
      status: -1,
      customerId: -1,
      intlTicket: -1,
      linkman: "",
      linkPhone: "",
      pnrNo: "",
      orderNo: "",
    };
  },
  computed: {
    sid() {
      return this.$store.state.sid;
    },
    redmineUrl() {
      return this.$store.state.redmineUrl;
    },
  },
  mounted: function () {},
  methods: {
    showSearchOption: function () {
      this.searchOption = true;
    },
    search: function () {
      this.searchOption = false;
      this.searchFlightOrders();
      this.searchFlightRefundOrders();
      this.searchChangeOrders();
      this.searchPassengers();
    },
    searchFlightOrders: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.endDate": this.endDate,
        "sc.name": this.name,
        "sc.phone": this.phone,
        "sc.linkman": this.linkman,
        "sc.linkPhone": this.linkPhone,
        "sc.idno": this.idno,
        "sc.status": this.status,
        "sc.customerId": this.customerId,
        "sc.ticketNo": this.ticketNo,
        "sc.intlTicket": this.intlTicket,
        "sc.pnrNo": this.pnrNo,
        "sc.orderNo": this.orderNo,
      };
      searchFlightOrders(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    searchFlightRefundOrders: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.endDate": this.endDate,
        "sc.intlTicket": this.intlTicket,
        "sc.name": this.name,
        "sc.idno": this.idno,
        "sc.ticketNo": this.ticketNo,
        "sc.pnrNo": this.pnrNo,
        "sc.orderNo": this.orderNo,
      };
      searchRefundOrders(params, (jsonResult) => {
        this.refundOrders = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    searchChangeOrders: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.endDate": this.endDate,
        "sc.intlTicket": this.intlTicket,
        "sc.name": this.name,
        "sc.idno": this.idno,
        "sc.ticketNo": this.ticketNo,
        "sc.pnrNo": this.pnrNo,
        "sc.orderNo": this.orderNo,
      };
      searchChangeOrders(params, (jsonResult) => {
        this.changeOrders = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    searchPassengers: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.name": this.name,
      };

      searchPassengers(params, (jsonResult) => {
        this.passengerList = jsonResult.dataList;
      });
    },
    reset: function () {
      this.beginDate = "";
      this.endDate = "";
      this.name = "";
      this.phone = "";
      this.idno = "";
      this.ticketNo = "";
      this.status = -1;
      this.customerId = -1;
      this.intlTicket = -1;
      this.sc.pageNo = 1;
      this.linkman = "";
      this.linkPhone = "";
      this.pnrNo = "";
      this.orderNo = "";
    },
  },
};
</script>